<template>
  <div class="container">
    <div class="header-box flex flex-center">
      <span>我的二课分：</span>
      <span>7.0</span>
    </div>
    <div class="body-box">
      <div class="card-item">
        <svg-icon icon-class="student-person-end" class="svg-icon" />
        <h3>第一届校园歌手大赛</h3>
        <p>二课分：1.0</p>
        <p>活动类型：社团活动</p>
        <p>发布机构：音乐爱好者协会</p>
        <p>参加时间：2021-05-27 10:15:17</p>
      </div>
      <div class="card-item">
        <svg-icon icon-class="student-person-end" class="svg-icon" />
        <h3>第一届校园歌手大赛</h3>
        <p>二课分：1.0</p>
        <p>活动类型：社团活动</p>
        <p>发布机构：音乐爱好者协会</p>
        <p>参加时间：2021-05-27 10:15:17</p>
      </div>
      <div class="card-item">
        <svg-icon icon-class="student-person-end" class="svg-icon" />
        <h3>第一届校园歌手大赛</h3>
        <p>二课分：1.0</p>
        <p>活动类型：社团活动</p>
        <p>发布机构：音乐爱好者协会</p>
        <p>参加时间：2021-05-27 10:15:17</p>
      </div>
      <div class="card-item">
        <svg-icon icon-class="student-person-end" class="svg-icon" />
        <h3>第一届校园歌手大赛</h3>
        <p>二课分：1.0</p>
        <p>活动类型：社团活动</p>
        <p>发布机构：音乐爱好者协会</p>
        <p>参加时间：2021-05-27 10:15:17</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-rows: 8rem auto;

  .header-box {
    background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%);

    span {
      color: #303133;
      font-weight: 700;
      font-size: 2rem;

      &:last-child {
        font-size: 3rem;
      }
    }
  }

  .body-box {
    min-height: 60rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 2rem;

    .card-item {
      width: 50rem;
      height: 25rem;
      margin: 2rem 0;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      border-radius: 1rem;
      padding: 2rem;
      color: #303133;
      position: relative;

      .svg-icon {
        width: 10rem;
        height: 10rem;
        position: absolute;
        top: 0;
        right: 0;
      }

      h3 {
        text-align: center;
        font-weight: 700;
        font-size: 1.6rem;
        margin: 2rem;
      }

      p {
        font-size: 1.4rem;
        margin: 1rem 0;
      }

      h5 {
        position: absolute;
        bottom: 1rem;
        right: 2rem;
        text-align: right;
      }
    }
  }
}</style>
